<template>
    <div>
        <h1 style="text-align: center;">{{course.course_name}}</h1>
        <el-button type="primary" @click="black()">返回主页</el-button>
    </div>
    <div>
        <van-grid :gutter="10" >
  <van-grid-item  v-for="value in course.course_section" :key="value"  style="--van-grid-item-icon-size:150px"  @click="cli(value)">
     <van-icon name="label-o"/>
     <div><span >{{course.course_name}}章节{{value}}</span></div>
    
 
</van-grid-item>
</van-grid>
    </div>
    
        <div>
        <van-grid :gutter="10" >
  <van-grid-item  v-for="value in contents" :key="value"  style="--van-grid-item-icon-size:50px"  >
     <van-icon name="label-o"/>
     
        <a :href="value.content" style="color: blue;">课程资料.{{value.type}}</a>
    </van-grid-item>
</van-grid>
</div>

</template>
<script>
import {Dialog }  from "vant";
export default{
    
    data(){
        return{
            study:{
                sno:0,
                tno:0,
                cno:''
            },
            course:{
                course_id: '',
                course_name: '',
                course_profile:'',
                course_type:'',
                course_section: 0,
                course_time: 0,
                course_price:0,
                course_user_id:'',//发布人的编号
                begin_time:'',
                update_time:'',
                end_time:'',
                course_status:0,//0待审 1审核通过 2审核未通过
                course_put_status:0, //0未上架 1上架
            },
            contents:[],
            count:0,
            studyRecord:{
                sno:0,
                tno:0,
                cno:'',
                study_time:0,
                rate:0
            }
            
        }
    },
    created(){
        this.getCourseid()
        this.getinformation()
    },
    methods:{
      async getCourseid(){
        // ${this.$route.query.id}
        console.log(this.$route.query.buttonstudy)
        console.log(this.$route.query.id)
        console.log(window.sessionStorage.getItem('token'))
        this.study.cno = this.$route.query.id
        this.study.sno = window.sessionStorage.getItem('token')
        this.study.tno = this.$route.query.tno
        console.log(this.study)
        if (this.$route.query.buttonstudy === '点击报名') {
            const { data: res} = await this.$http.post('addStudy',this.study)
        if(res.course_user_id == 500){
           return this.$message.error('出问题了')
        }
        this.course = res
        
        }else{
            const { data: res} = await this.$http.get('selectCourse/'+this.study.cno)
            this.course = res
        }
        


        
       },
    
       async getinformation(){
            const { data : res }= await this.$http.get("getinformation/"+this.study.cno)
            console.log(res)
            this.contents = res
       },
       black(){
        this.$router.push('/welcome')
       },
        cli(value) {
            let time=setInterval(() => {
                this.count = this.count + 1
                console.log(this.count)
            }, 1000);
         
            Dialog.confirm({
            title:'正在学习',
            message:
                '点击取消此次学习作废 ',
            })
            .then(() => {
                
                clearInterval(time)

                this.studyRecord.cno =this.study.cno 
                this.studyRecord.sno =this.study.sno 
                this.studyRecord.tno =this.study.tno 
                this.studyRecord.study_time =this.count
                const data=  this.$http.post("/updateStudyTime",this.studyRecord)
                this.$message.success('本次学习'+this.count+'s')
            })
            .catch(() => {

            });  
        }
    }
    
}
</script>